<template>
  <section>
    <div v-if="isBaidu"
      style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-image: url('http://liaoma-test.oss-cn-shenzhen.aliyuncs.com/storage/file/dbf6eef767f921a4162abb17ff2dd3bcdef6c84a.png');
      "
    ></div>
    <video v-else
      loop
      :controls="false"
      autoplay
      muted
      playsinline
      style="
        width: 100%;
        height: 100%;
        object-fit: fill;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      "
    >
      <source src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/2d4674d7df3628204eaa956b08f14d9e_raw.mp4" />
    </video>
    <div class="box">
      <div v-for="(item, index) in logos" :key="index" class="square" :style="`--i: ${index}`">
        <el-image style="width: 100%; height: 100%" :src="item.logo" fit="scale-down" />
      </div>
      <!-- <div class="square" style="--i: 1"></div>
      <div class="square" style="--i: 2"></div>
      <div class="square" style="--i: 3"></div>
      <div class="square" style="--i: 4"></div>
      <div class="square" style="--i: 5"></div> -->

      <img style="width: 453px; height: 134px; position: absolute; top: -166px; left: 50%; transform: translateX(-50%);" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/login/logo_top.png" alt="">
      <div class="container">
        <div class="Media Media--alignCenter" style="width: 100%">
          <el-image class="p_1" style="width: 453px" :src="p_1" fit="scale-down" />
          <div class="Media-body">
            <div class="Grid">
              <div class="form">
                <div class="Media Media--center Media--justifyCenter" style="margin-bottom: 30px">
                  <img v-if="type === 'login'" width="64px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/login/logo_g.png" alt="">
                </div>
                <el-form
                  v-if="type === 'login'"
                  ref="ref"
                  class="login-form"
                  :model="model"
                  :rules="rules"
                  novalidate
                >
                  <div class="inputBx">
                    <el-form-item prop="username">
                      <img style="width:32px;position: absolute;left: -34px;" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/login/accounts.png" alt="">
                      <input
                        type="text"
                        v-model="model.username"
                        @input="$refs['ref'].validate()"
                        placeholder="请输入账号"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.username') }}</span> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <User />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx password">
                    <el-form-item prop="password">
                      <img style="width:32px;position: absolute;left: -34px;" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/login/password.png" alt="">
                      <input
                        id="password-input"
                        type="password"
                        v-model="model.password"
                        @input="$refs['ref'].validate()"
                        placeholder="请输入密码"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.password') }}</span> -->
                      <!-- <a href="#" class="password-control" onclick="return false;"></a> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <Lock />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div>
                    <el-button
                      :loading="loading"
                      type="primary"
                      class="login-bottom"
                      @click.prevent="handleLogin"
                      style="width: 240px; font-size: 16px; border: none;height: 40px;background: #52B36D;border-radius: 20px;"
                    >
                      {{ $t('login.login') }}
                    </el-button>
                  </div>
                </el-form>
                <el-form
                  v-if="type === 'register'"
                  ref="registerRef"
                  class="login-form"
                  :model="registerModel"
                  :rules="registerRules"
                  novalidate 
                >
                  <div class="inputBx">
                    <el-form-item prop="user_id">
                      <select
                        v-model="registerModel.user_id"
                        style="
                          -webkit-appearance: none;
                          -moz-appearance: none;
                          appearance: none;
                          background-color: #eeeeee;
                          width: 100%;
                          outline: none;
                          border: none;
                          /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
                          padding: 8px 10px;
                          /* padding-left: 40px; */
                          border-radius: 4px;
                          color: #222222;
                          font-size: 14px;
                          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                        "
                        @change="$refs['registerRef'].validate()"
                      >
                        <option value="" disabled selected>请选择组长</option>
                        <option
                          v-for="(item, index) in UserApplyGroup"
                          :key="index"
                          :value="item.user_id"
                        >
                          {{ item.real_name }}
                        </option>
                      </select>
                      <!-- <span>{{ $t('login.real_name') }}</span> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <User />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx">
                    <el-form-item prop="real_name">
                      <input
                        type="text"
                        v-model="registerModel.real_name"
                        @input="$refs['registerRef'].validate()"
                        placeholder="请输入真实姓名"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.real_name') }}</span> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <User />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx">
                    <el-form-item prop="phone">
                      <input
                        type="text"
                        v-model="registerModel.phone"
                        placeholder="请输入手机号"
                        @input="$refs['registerRef'].validate()"
                        maxlength="11"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.phone') }}</span> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <Iphone />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx">
                    <el-form-item prop="nickname">
                      <input
                        type="text"
                        v-model="registerModel.nickname"
                        @input="$refs['registerRef'].validate()"
                        placeholder="请输入IP昵称"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.nickname') }}</span> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <User />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx">
                    <el-form-item prop="username">
                      <input
                        type="text"
                        v-model="registerModel.username"
                        @input="$refs['registerRef'].validate()"
                        placeholder="请输入登录账号(至少6位)"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.username') }}</span> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <User />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx password">
                    <el-form-item prop="password">
                      <input
                        id="password-input"
                        type="password"
                        v-model="registerModel.password"
                        @input="$refs['registerRef'].validate()"
                        placeholder="请输入密码"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.password') }}</span> -->
                      <!-- <a href="#" class="password-control" onclick="return false;"></a> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <Lock />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div class="inputBx password">
                    <el-form-item prop="checkPassword">
                      <input
                        id="password-input"
                        type="password"
                        v-model="registerModel.checkPassword"
                        @input="$refs['registerRef'].validate()"
                        placeholder="请输入确认密码"
                        required="required"
                      />
                      <!-- <span>{{ $t('login.password') }}</span> -->
                      <!-- <a href="#" class="password-control" onclick="return false;"></a> -->
                      <!-- <el-icon
                        style="position: absolute; top: 12px; left: 15px"
                        :size="size"
                        color="#888888"
                      >
                        <Lock />
                      </el-icon> -->
                    </el-form-item>
                  </div>
                  <div>
                    <el-button
                      :loading="loading"
                      type="primary"
                      class="login-bottom"
                      @click.prevent="handleRegister"
                      style="width: 240px; height: 35px; font-size: 16px; border: none;background: #52B36D;border-radius: 20px;"
                    >
                      提交审核
                    </el-button>
                  </div>
                </el-form>
                <div v-if="type === 'login'" class="Grid Grid--justifyCenter text-sm" style="width: 240px;">
                  <text
                    style="
                      cursor: pointer;
                      padding: 20px 0px;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 16px;
                      color: #52B36D;
                    "
                    @click="clickRegister"
                  >
                    账号申请
                  </text>
              </div>
              </div>
            </div>
            <div v-if="type === 'register'" class="Grid Grid--justifyCenter text-sm" style="width: 274px;">
              <text
                style="
                  cursor: pointer;
                  padding: 20px 0px;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 16px;
                  margin-left: 34px;
                  color: #52B36D;
                "
                @click="
                  () => {
                    type = 'login'
                  }
                "
              >
                返回登录
              </text>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        position: absolute;
        bottom: 20px;
        left: 0;
        text-align: center;
        color: #ffffff;
        width: 100%;
        z-index: 2;
      "
    >
      <a class="text-sm" style="cursor: pointer" href="https://beian.miit.gov.cn" target="_blank"
        >新料码 All rights reserved. v1.5.0 粤ICP备2023134200号</a
      >
    </div>
  </section>
</template>

<script>
import defaultSettings from '@/settings'
import LangSelect from '@/components/LangSelect/index.vue'
import ThemeSelect from '@/components/ThemeSelect/index.vue'
import AjCaptcha from '@/components/AjCaptcha/index.vue'
import { captcha, setting, userApplyAdd, UserApplyGroupList } from '@/api/system/login'
import { useAppStoreHook } from '@/store/modules/app'
import { useSettingsStoreHook } from '@/store/modules/settings'
import { useUserStoreHook } from '@/store/modules/user'
import { delNotice } from '@/utils/settings'
// import p_1 from '@/assets/images/login/logo_left.png'

export default {
  name: 'SystemLogin',
  components: { LangSelect, ThemeSelect, AjCaptcha },
  data() {
    return {
      isBaidu: false,
      p_1: 'https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/login/logo_left.png',
      name: '登录',
      loading: false,
      redirect: undefined,
      otherQuery: {},
      captcha_switch: 0,
      captcha_mode: 1,
      captcha_type: 'blockPuzzle',
      captcha_src: '',
      login_bg_url: '',
      login_bg_color: '',
      logo_url: '',
      system_name: '新料码',
      model: {
        // ip: '',
        username: '',
        password: '',
        captcha_id: '',
        captcha_code: '',
        ajcaptcha: {}
      },
      registerModel: {
        user_id: '',
        real_name: '',
        phone: '',
        nickname: '',
        username: '',
        password: '',
        checkPassword: ''
      },
      type: 'login', // register progress
      UserApplyGroup: [],
      logos: []
    }
  },
  computed: {
    captchaHeight() {
      const appStore = useAppStoreHook()
      if (appStore.size == 'large') {
        return '40px'
      } else if (appStore.size == 'small') {
        return '24px'
      }
      return '32px'
    },
    rules() {
      return {
        username: [
          { required: true, message: this.$t('login.Please enter username'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('login.Please enter password'), trigger: 'blur' }
        ],
        captcha_code: [
          { required: true, message: this.$t('login.Please enter captcha code'), trigger: 'blur' }
        ]
      }
    },
    registerRules() {
      return {
        user_id: [{ required: true, message: '请选择组长', trigger: 'blur' }],
        real_name: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
        phone: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => this.validatePhone(rule, value, callback)
          }
        ],
        nickname: [{ required: true, message: 'IP昵称不能为空', trigger: 'blur' }],
        username: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => this.validateUserName(rule, value, callback)
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        checkPassword: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => this.validatePass(rule, value, callback)
          }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    const userAgent = navigator.userAgent;
    this.isBaidu = /Baidu/.test(userAgent);
    this.setting()
    document.addEventListener('keyup', this.handleKeydown)
  },
  beforeUnmount() {
    document.removeEventListener('keyup', this.handleKeydown)
  },
  methods: {
    validatePhone(rule, value, callback) {
      if (/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(value)) {
        callback()
      } else {
        callback(new Error('手机号格式有误'))
      }
    },
    validatePass(rule, value, callback) {
      if (this.registerModel.password && value !== this.registerModel.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    },
    validateUserName(rule, value, callback) {
      if (/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/.test(value)) {
        callback()
      } else {
        callback(new Error('请以字母开头，至少6位'))
      }
    },
    // 验证码
    captcha() {
      captcha().then((res) => {
        this.captchaData(res.data)
      })
    },
    captchaData(data) {
      this.model.captcha_id = ''
      this.model.captcha_code = ''
      if (data.captcha_switch) {
        if (data.captcha_mode === 1) {
          this.captcha_src = data.captcha_src
          this.model.captcha_id = data.captcha_id
        }
      }
      this.captcha_switch = data.captcha_switch
      this.captcha_mode = data.captcha_mode
      if (data.captcha_type === 1) {
        this.captcha_type = 'blockPuzzle'
      } else {
        this.captcha_type = 'clickWord'
      }
      const storePrefix = defaultSettings.storePrefix
      localStorage.setItem(storePrefix + 'captchaSwitch', data.captcha_switch)
      localStorage.setItem(storePrefix + 'captchaMode', data.captcha_mode)
      localStorage.setItem(storePrefix + 'captchaType', data.captcha_type)
      localStorage.setItem(storePrefix + 'captchaSrc', data.captcha_src)
    },
    ajcaptchaSuccess(params) {
      this.model.ajcaptcha = params
      this.handleLogin()
    },
    ajcaptchaShow() {
      this.$refs['ref'].validate((valid) => {
        if (valid) {
          this.$refs.ajcaptcha.show()
        } else {
          return false
        }
      })
    },
    // 设置
    setting() {
      const storePrefix = defaultSettings.storePrefix
      this.login_bg_url = localStorage.getItem(storePrefix + 'loginBgUrl')
      this.login_bg_color = localStorage.getItem(storePrefix + 'loginBgColor')
      this.logo_url = localStorage.getItem(storePrefix + 'logoUrl')
      this.system_name = localStorage.getItem(storePrefix + 'systemName')
      this.model.captcha_id = ''
      this.model.captcha_code = ''
      this.captcha_switch = localStorage.getItem(storePrefix + 'captchaSwitch')
      this.captcha_mode = localStorage.getItem(storePrefix + 'captchaMode')
      this.captcha_type = localStorage.getItem(storePrefix + 'captchaType')
      this.captcha_src = localStorage.getItem(storePrefix + 'captchaSrc')
      const settingsStore = useSettingsStoreHook()
      settingsStore.changeSetting({ key: 'watermarkContent', value: '' })
      setting()
        .then((res) => {
          delNotice()
          const data = res.data
          this.captchaData(data)
          this.login_bg_url = data.login_bg_url
          this.login_bg_color = data.login_bg_color
          this.logo_url = data.logo_url
          this.system_name = data.system_name
          this.logos = data.logos
          settingsStore.changeSetting({ key: 'loginBgUrl', value: data.login_bg_url })
          settingsStore.changeSetting({ key: 'loginBgColor', value: data.login_bg_color })
          settingsStore.changeSetting({ key: 'logoUrl', value: data.logo_url })
          settingsStore.changeSetting({ key: 'systemName', value: data.system_name })
          settingsStore.changeSetting({ key: 'pageTitle', value: data.page_title })
          settingsStore.changeSetting({ key: 'pageLimit', value: data.page_limit })
          settingsStore.changeSetting({ key: 'notice', value: 0 })
          settingsStore.changeSetting({ key: 'watermarkEnabled', value: data.is_watermark })
        })
        .catch(() => {})
    },
    // 登录
    handleLogin() {
      this.$refs['ref'].validate((valid) => {
        if (valid) {
          this.loading = true
          const userStore = useUserStoreHook()
          userStore
            .login(this.model)
            .then(() => {
              this.$router
                .push({
                  path: this.redirect || '/',
                  query: this.otherQuery
                })
                .catch(() => {
                  this.loading = false
                })
            })
            .catch(() => {
              this.loading = false
              if (this.captcha_switch && this.captcha_mode === 2) {
                this.$refs.ajcaptcha.refresh()
              } else {
                this.captcha()
              }
            })
        } else {
          return false
        }
      })
    },
    // 账号申请
    handleRegister() {
      this.$refs['registerRef'].validate((valid) => {
        if (valid) {
          this.loading = true
          userApplyAdd(this.registerModel)
            .then((res) => {
              this.loading = false
              if (res.code === 200) {
                this.registerModel = {
                  user_id: '',
                  real_name: '',
                  phone: '',
                  nickname: '',
                  username: '',
                  password: '',
                  checkPassword: ''
                }
                ElMessage({
                  message: '账号申请成功，请等待管理员审核!',
                  type: 'success',
                  duration: 3000,
                  customClass: 'hintMessage'
                })
              } else {
                ElMessage.error('账号申请失败!')
              }
            })
            .catch(() => {
              this.loading = false
              ElMessage.error('账号申请失败!')
            })
        } else {
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    handleKeydown(e) {
      if (e.keyCode === 13) {
        this.handleLogin()
      }
    },
    clickRegister() {
      // 获取组长
      UserApplyGroupList()
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.UserApplyGroup = res.data.list
          }
        })
        .catch(() => {})
      this.type = 'register'
    }
  }
}
</script>
<style>
.hintMessage{
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  font-family: 'El Messiri', sans-serif;
}

body {
  background: #031323;
  overflow: hidden;
}

.fas {
  width: 32px;
}

section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  // #ee7752, #e73c7e,
  // background: linear-gradient(-45deg, #0077e6, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  overflow: hidden;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.box {
  position: relative;
  z-index: 2;
  // z-index: 9999;
  .square {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    animation: square 10s linear infinite;
    animation-delay: calc(-1s * var(--i));
    padding: 10px;
  }

  @keyframes square {
    0%,
    100% {
      transform: translateY(-20px);
    }

    50% {
      transform: translateY(20px);
    }
  }

  .square:nth-child(1) {
    width: 100px;
    height: 100px;
    top: -15px;
    right: -45px;
    z-index: 2;
  }

  .square:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 105px;
    left: -125px;
    z-index: 2;
  }

  .square:nth-child(3) {
    width: 60px;
    height: 60px;
    bottom: 85px;
    right: -45px;
    z-index: 2;
  }

  .square:nth-child(4) {
    width: 50px;
    height: 50px;
    bottom: 35px;
    left: -95px;
    z-index: 2;
  }

  .square:nth-child(5) {
    width: 50px;
    height: 50px;
    top: -15px;
    left: -25px;
    z-index: 2;
  }

  .square:nth-child(6) {
    width: 85px;
    height: 85px;
    top: 165px;
    right: -155px;
    z-index: 2;
  }
}

.container {
  position: relative;
  // width: 460px;
  padding: 0 12px;
  width: 718px;
  min-height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
  padding-right: 70px;
}

.container::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 5px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 2%);
}

.form {
  position: relative;
  // width: 100%;
  width: 274px;
  // height: 100%;
  height: auto;
  padding-left: 36px;

  h2 {
    color: #fff;
    letter-spacing: 2px;
  }

  .inputBx {
    position: relative;
    width: 100%;
    margin-bottom: 20px;

    input {
      width: 100%;
      outline: none;
      border: none;
      // border: 1px solid rgba(255, 255, 255, 0.2);
      // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      // background: rgba(255, 255, 255, 0.2);
      padding: 8px 10px;
      // padding-left: 40px;
      border-radius: 4px;
      // color: #fff;
      color: #222222;
      font-size: 14px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      background: #efefef;
    }

    // .password-control {
    //   position: absolute;
    //   top: 11px;
    //   right: 10px;
    //   display: inline-block;
    //   width: 20px;
    //   height: 20px;
    //   background: url(https://snipp.ru/demo/495/view.svg) 0 0 no-repeat;
    //   transition: 0.5s;
    // }

    .fas {
      position: absolute;
      top: 13px;
      left: 13px;
    }

    input[type='submit'] {
      background: #fff;
      color: #111;
      max-width: 100px;
      padding: 8px 10px;
      box-shadow: none;
      letter-spacing: 1px;
      cursor: pointer;
      transition: 1.5s;
    }

    input[type='submit']:hover {
      background: linear-gradient(115deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.25));
      color: #fff;
      transition: 0.5s;
    }

    input::placeholder {
      // color: #fff;
      color: #888888;
    }

    span {
      position: absolute;
      left: 30px;
      padding: 7px 10px;
      display: inline-block;
      // color: #fff;
      color: #888888;
      transition: 0.5s;
      pointer-events: none;
    }

    input:focus ~ span,
    input:valid ~ span {
      transform: translateX(-30px) translateY(-25px);
      font-size: 12px;
    }
  }

  p {
    color: #fff;
    font-size: 15px;
    margin-top: 5px;

    a {
      color: #fff;
    }

    a:hover {
      background-color: #000;
      background-image: linear-gradient(to right, #434343 0%, black 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
::v-deep .el-form-item__content{
  .el-form-item__error{
    line-height: 16px;
  }
}
/* 针对纵向手机设备 */
@media (max-width: 768px) and (orientation: portrait) {
  .container {
    width: 380px;
  }
  .container .p_1 {
    display: none;
  }
}

::v-deep .el-select .el-input__inner {
  border: none;
}

video::-webkit-media-controls {
  display: none !important;
}
</style>
